<template>
  <!-- 首页的界面 -->
  <div class="wrapper">
    <!-- 上边的搜索框 -->
    <div class="input">
      <search></search>
    </div>
    <!-- 分类 -->
    <div>
      <van-tabs @click="change">
        <!-- 标题 -->
        <van-tab title="推荐" name="0">
          <!-- 内容 -->
          <div
            style="margin-top: 10px; background: white; padding: 10px"
            v-for="(item, index) in allArr"
            :key="index"
          >
            <!-- 标题 -->
            <router-link
              :to="{ path: '/detail', query: { id: item.postsId } }"
              tag="div"
            >
              <b>{{ item.title }}</b>
              <div style="display: flex">
                <div style="width: 70%">
                  <div class="name">
                    <van-image
                      round
                      width="20px"
                      height="20px"
                      style="vertical-align: middle"
                      :src="item.avatar"
                    />
                    <span style="margin-left: 5px; font-weight: bolder">{{
                      item.userName
                    }}</span>
                  </div>
                  <!-- 内容 -->
                  <p class="p1">
                    {{ item.intro }}
                  </p>
                </div>
                <div style="width: 30%">
                  <img :src="item.coverImgUrl" alt="" style="width: 100%" />
                </div>
              </div>
              <p style="color: #666; font-size: 12px">
                <span>{{ item.zan }}人已赞</span>
                <span>{{ item.readNum }}人读</span>
              </p>
            </router-link>
          </div>
        </van-tab>
        <van-tab
          v-for="(item, index) in arr"
          :key="index"
          :title="item.name"
          :name="index + 1"
        >
          <!-- 内容 -->
          <div
            style="margin-top: 10px; background: white; padding: 10px"
            v-for="(item, index) in arr1"
            :key="index"
          >
            <!-- 标题 -->
            <router-link
              :to="{ path: '/detail', query: { id: item.postsId } }"
              tag="div"
            >
              <b>{{ item.title }}</b>
              <div style="display: flex">
                <div style="width: 70%">
                  <div class="name">
                    <van-image
                      round
                      width="20px"
                      height="20px"
                      style="vertical-align: middle"
                      :src="item.avatar"
                    />
                    <span style="margin-left: 5px; font-weight: bolder">{{
                      item.userName
                    }}</span>
                  </div>
                  <!-- 内容 -->
                  <p class="p1">
                    {{ item.intro }}
                  </p>
                </div>
                <div style="width: 30%">
                  <img :src="item.coverImgUrl" alt="" style="width: 100%" />
                </div>
              </div>
              <p style="color: #666; font-size: 12px">
                <span>{{ item.zan }}人已赞</span>
                <span>{{ item.readNum }}人读</span>
              </p></router-link
            >
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部组件 -->
    <Footer></Footer>
  </div>
</template>

<script>
import { topicList, typeList, typeAll } from "../api/api";
import Footer from "../components/Footer";
import Search from "../components/Search.vue";
export default {
  components: { Footer, Search },
  data() {
    return {
      value: "",
      arr: [],
      arr1: [],
      allArr: [],
      isLoading: false,
    };
  },
  created() {
    // 专题列表
    topicList().then((res) => {
      // console.log(res);
      this.arr = res.rows;
    });
    // 所有
    typeAll().then((res) => {
      // console.log(res);
      this.allArr = res.rows;
    });
  },
  methods: {
    change(name) {
      // 类型帖子列表
      typeList(name).then((res) => {
        // console.log(res);
        this.arr1 = res.rows;
      });
    },
  },
};
</script>
<style scoped lang="less">
.wrapper {
  background-color: #f7f8fa;
}
/deep/.van-search__content {
  border-radius: 20px;
}
.input {
  margin-bottom: 10px;
}
.p1 {
  /* 多行溢出隐藏 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0 5px 0 10px;
}
/deep/b {
  font-size: 16px;
  color: black;
}
.name {
  margin: 5px 0;
}
</style>